<section class="push-bottom-xxl">
  <h1 class="push-bottom-sm mat-h1">CSS Utility Styles &amp; Classes</h1>

  <p class="tc-td-secondary push-bottom-md">
    Covalent includes many utility styles to save you time. We've included
    general utilities, padding (pad), margin (push), negative margin (pull),
    sizing, and text classes.
  </p>
</section>

<section class="push-bottom-xxl">
  <section class="push-bottom-xl">
    <h4 class="push-bottom-sm mat-title">General Utilities</h4>
    <td-highlight codeLang="css">
      {{ generalCss }}
    </td-highlight>
  </section>
  <section class="push-bottom-xl">
    <h4 class="push-bottom-sm mat-title">Sizing Utilities</h4>
    <td-highlight codeLang="css">
      {{ sizeCss }}
    </td-highlight>
  </section>
  <section class="push-bottom-xl">
    <h4 class="push-bottom-sm mat-title">Text Utilities</h4>
    <td-highlight codeLang="css">
      {{ textCss }}
    </td-highlight>
  </section>
  <h4 class="push-bottom-xs mat-title">Layout Utilities</h4>
  <div layout-gt-md="row">
    <div flex class="push-right-sm">
      <h4 class="push-bottom-sm push-top-smP">Pad (Padding)</h4>
      <td-highlight codeLang="css">
        {{ padCss }}
      </td-highlight>
    </div>
    <div flex class="push-right-sm">
      <h4 class="push-bottom-sm push-top-smP">Push (Margin)</h4>
      <td-highlight codeLang="css">
        {{ pushCss }}
      </td-highlight>
    </div>
    <div flex>
      <h4 class="push-bottom-sm push-top-smP">Pull (Negative Margin)</h4>

      <td-highlight codeLang="css">
        {{ pullCss }}
      </td-highlight>
    </div>
  </div>
</section>
